<template>
  <div class="article-meta">
    <nuxt-link :to="{name: 'profile', params: { username: article.author.username }}">
      <img :src="article.author.image" />
    </nuxt-link>
    <div class="info">
      <nuxt-link class=""author :to="{name: 'profile', params: { username: article.author.username }}">
        {{ article.author.username }}
      </nuxt-link>
      <span class="date">{{ article.createdAt|date('MMM DD, YYYY') }}</span>
    </div>
    <template v-if="isAuthor">
      <router-link class="btn btn-sm btn-outline-secondary" :to="{ name: 'editor', params: { slug: article.slug } }">
        <i class="ion-edit"></i> <span>&nbsp;Edit Article</span>
      </router-link>
      <span>&nbsp;&nbsp;</span>
      <button class="btn btn-outline-danger btn-sm" @click="deleteArticle">
        <i class="ion-trash-a"></i> <span>&nbsp;Delete Article</span>
      </button>
    </template>
    <template v-else>
      <button class="btn btn-sm btn-outline-secondary" :class="{ active: article.author.following }">
        <i class="ion-plus-round"></i>
        &nbsp;
        Follow Eric Simons <span class="counter">(10)</span>
      </button>
      &nbsp;&nbsp;
      <button class="btn btn-sm btn-outline-primary" :class="{ active: article.favorited }">
        <i class="ion-heart"></i>
        &nbsp;
        Favorite Post <span class="counter">(29)</span>
      </button>
    </template>

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { deleteArticle } from "@/api/article"

	export default {
		name: 'ArticleMeta',
    props: {
			article: {
				type: Object,
        required: true
      }
    },
    computed: {
			...mapState({
        user: state => state.user
      }),
      isAuthor() {
				return this.article.author.username === this.user.username
      }
    },
    methods: {
	    async deleteArticle() {
        if (!confirm('确认要删除吗?')) {
          return
        }
		    try {
			    await deleteArticle(this.article.slug);
			    this.$router.push("/");
		    } catch (err) {
			    console.error(err);
		    }
	    }
    }
	}
</script>

<style lang='less' scoped>

</style>